<template>
  <div class="app-container">
    <!--  查询  -->
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline formHeight">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="企业名称">
              <el-input v-model="formInline.company_name" size="mini" placeholder="请输入企业名称" @change="search" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业地址">
              <el-input v-model="formInline.address" size="mini" placeholder="请输入企业地址" @change="search" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="clearSearch" size="mini">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-card>

    <!--  列表  -->
    <el-card class="box-card mt20">
      <div slot="header" class="clearfix">
        <span>企业列表</span>
        <el-button style="float: right;" type="primary" @click="addOrEdit(1)" size="mini">新增</el-button>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%;"
        class="tHeight"
        size="mini"
        :default-sort="{prop: formInline.sort, order: formInline.order}"
        @sort-change="tableSortChange"
      >
        <el-table-column
          label="企业logo"
          width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <img class="el-image" :src="scope.row.company_logo" width="40" height="40">
          </template>
        </el-table-column>
        <el-table-column
          property="company_name"
          label="企业名称"
          align="center"
        />
        <el-table-column
          property="address"
          label="企业地址"
          align="center"
        />
        <el-table-column
          label="营业执照"
          align="center"
        >
          <template slot-scope="scope">
            <img v-if="scope.row.company_cert" class="el-image" :src="scope.row.company_cert" width="40" height="40">
          </template>
        </el-table-column>
        <el-table-column
          prop="company_end"
          label="营业执照有效期"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <div>{{ scope.row.company_start }} - {{ scope.row.company_end }}</div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="mini"
              @click="addOrEdit(2, scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="del(scope.row.id)"
            >
              删除
            </el-button>
             <el-button
              type="primary"
              size="mini"
              @click="see(scope.row.id)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   分页   -->
<!--      <el-pagination-->
<!--        class="paginationPage"-->
<!--        background-->
<!--        :page-sizes="[100, 200, 300, 400]"-->
<!--        :page-size="10"-->
<!--        :current-page="formInline.offset"-->
<!--        layout="total, prev, pager, next, jumper"-->
<!--        :total="total"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--      />-->
      <pagination style='float: right;' v-show='total>0' :total='total' :page.sync='formInline.offset' :limit.sync='formInline.limit' @pagination='getList' />
    </el-card>

    <div v-if="detailFlag">
      <Detail
        :id="detailId"
        :dialog-visible="detailFlag"
        :title="detailTitle"
        @close="close"
        @confirm="confirm"
      />
    </div>
      <!-- 查看提示框 -->
    <el-dialog
  title="用户信息"
  :visible.sync="dialogVisiblesee"
  width="30%"
  >
  <el-form :model="formInline1" class="see">
    <el-form-item label="用户名">
       <el-input v-model="formInline1.name" readonly></el-input>
    </el-form-item>
    <el-form-item label="密码">
       <el-input v-model="formInline1.password" readonly></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
    <el-button type="primary" @click="dialogVisiblesee = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { companyUserList, deteleCompanyUser ,seeCompanyUser} from '@/api/companyUser'
import Detail from './components/detail'

export default {
  name: 'companyUser',
  components: {
    Detail
  },
  data() {
    return {
      dialogVisiblesee:false,
      detailId: '', // 修改详情id
      detailFlag: false, // 详情弹窗标识
      detailTitle: '新增', // 弹窗标识
      tableData: [], // 列表数据
      total: 0, // 数据总条数
      formInline1:{
        name:'',
        password:'123456(默认密码)'
      },  //查看用户信息
      // 搜索表单
      formInline: {
        sort: 'created_at',
        offset: 0,
        limit: 10,
        order: 'ascending',
        company_name: '',
        address: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 查看
    see(obj){
      seeCompanyUser({id:obj}).then(res=>{
        if(res.data.name&&res.data.name.length>0){
          this.formInline1.name=res.data.name
           this.dialogVisiblesee=true
        }else{
          this.$message.error('暂无用户信息');
        }


      })
    },
    /**
     * @description: 排序
     * @author: 书童
     */
    tableSortChange(column) {
      this.formInline.order = column.order ? column.order : 'descending'
      this.formInline.sort = column.prop
      this.formInline.offset = 0
      this.getList()
    },

    clearSearch() {
      this.formInline = {
        sort: 'created_at',
        offset: 0,
        limit: 10,
        order: 'ascending',
        company_name: ''
      }
      this.getList()
    },
    /**
     * @description: 查询
     * @author: 书童
     */
    search() {
      this.formInline.offset = 0
      this.getList()
    },
    /**
     * @description: 删除数据
     * @author: 书童
     * @param: id
     */
    del(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deteleCompanyUser({ id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        })
      })
    },
    /**
     * @description: 新增或编辑
     * @author: 书童
     * @param: 1新增，2编辑
     */
    addOrEdit(num, id) {
      if (num === 1) {
        this.detailTitle = '新增'
        this.detailFlag = true
      } else {
        this.detailTitle = '编辑'
        this.detailId = id
        this.detailFlag = true
      }
    },
    // 获取列表
    getList() {
      companyUserList(this.formInline).then(res => {
        this.tableData = res.data.companies
        this.total = res.data.total
      })
    },
    //  关闭弹窗组件
    close() {
      this.detailFlag = false
      this.detailId = ''
    },
    // 弹窗返回
    confirm() {
      this.close()
      this.getList()
    },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.formInline.offset = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.formHeight {
  height: 40px;
}

.mt20 {
  margin-top: 20px;
}

.tHeight {
  /*height: calc(100vh - 350px);*/
  overflow: auto;
}
.see{
  ::v-deep.el-input{
    width: 60%!important;
  }
  ::v-deep.el-form-item__label{
    text-align: right;
    display:inline-block;
    width:100px;
  }
  ::v-deep.el-input__inner{
    background: #eee;
  }
}
</style>
